<template>
    <view class="xilu">
        <view class="page-foot bg-white" @click="payment()">
            <view class="btn1">确定支付</view>
        </view>
        <view class="container">
            <view class="red tc fs44 fwb"><text class="fs24">¥</text>{{order.pay_price}}</view>
            <view class="xilu_box">
                <view class="fs30 col6">支付方式</view>
				<!-- #ifdef APP-PLUS -->
				<view class="flex-box xilu_action zhifubao pt40">
				    <view class="flex-grow-1 fs34 col10">支付宝支付</view>
				    <image src="/static/icon/choose-on.png" mode="aspectFill" class="xilu_choose"></image>
				</view>
				<!-- #endif -->
                
                <!-- <view class="flex-box xilu_action yue pt60">
                    <view class="flex-grow-1 fs34 col10">余额支付</view>
                    <image src="/static/icon/choose.png" mode="aspectFill" class="xilu_choose"></image>
                </view> -->
                <view class="flex-box xilu_action weixin pt60">
                    <view class="flex-grow-1 fs34 col10">微信支付</view>
                    <image src="/static/icon/choose-on.png" mode="aspectFill" class="xilu_choose"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				orderId:0,
				order:{}
            };
        },
		onLoad(options) {
			this.orderId = options.order_id || 0;
			this.fetchOrder()
		},
		methods:{
			fetchOrder(){
				this.$core.post({url: 'xilumarket.pay/pre_pay_order',data: {order_id:this.orderId},loading: true,success: ret => {
					//下单成功，前往收银台
						this.order = ret.data;
					},fail: err => {
						console.log(err);
					}
				});
			},
			
			payment(){
				let page = this;
				//#ifdef MP-WEIXIN
				this.$core.post({url:'xilumarket.pay/pay',data:{pay_type:1,order_id:this.orderId,platform:'wxmini'},success:(ret)=>{
					let wxconfig =  ret.data;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: wxconfig.timeStamp,
						nonceStr: wxconfig.nonceStr,
						package: wxconfig.package,
						signType: wxconfig.signType,
						paySign: wxconfig.paySign,
						success: function (res) {
							// page.getOpenerEventChannel().emit('paySuccess',{});
							uni.redirectTo({
								url: '/pages/pay_success/pay_success?order_id='+this.orderId
							})
						},
						fail: function (err) {
							console.log(err);
						}
					});
				}});
				//#endif
				//#ifdef H5
					uni.showModal({
						title:'提示',
						content: '暂不支持h5支付',
						success: function (res) {
							uni.navigateBack({
								delta:1
							})
						}
					})
				//#endif
			}
			
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            background: #F7F9FD;
        }

        .red {
            padding: 70rpx 0 70rpx;
        }

        &_box {
            width: 690rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
            margin: 0 auto;
            padding: 40rpx 30rpx 60rpx;
        }

        &_action.weixin::before {
            content: "";
            display: block;
            width: 40rpx;
            height: 40rpx;
            margin-right: 15rpx;
            background: url("/static/icon/pay_action1.png") no-repeat center;
            background-size: 100%;
        }

        &_action.zhifubao::before {
            content: "";
            display: block;
            width: 40rpx;
            height: 40rpx;
            margin-right: 15rpx;
            background: url("/static/icon/pay_action2.png") no-repeat center;
            background-size: 100%;
        }

        &_action.yue::before {
            content: "";
            display: block;
            width: 40rpx;
            height: 40rpx;
            margin-right: 15rpx;
            background: url("/static/icon/pay_action3.png") no-repeat center;
            background-size: 100%;
        }

        &_choose {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
        }

        .pt60 {
            padding-top: 60rpx;
        }
    }
</style>